<template>
  <div ref="appContainer" class="app-container">
    <PropTable :loading="loading" :columns="baseColumns" :total="total" :data="list" @reset="reset" @on-submit="onSubmit">
      <template #btn>
        <div style="display: flex; justify-content: flex-end">
          <el-button type="primary" @click="exportExcelTable">
            <el-icon><Download /></el-icon> 导出列表</el-button
          >
        </div>
      </template>
    </PropTable>
    <el-dialog v-model="dialogVisible" title="请选择需要导出的数据范围" width="500" :before-close="handleClose">
      <el-radio-group v-model="chooseValue" size="large">
        <el-radio-button label="0">当前页面数据</el-radio-button>
        <el-radio-button label="1">全部数据</el-radio-button>
      </el-radio-group>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="sureDownload"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup name="device">
  import { getDeviceList } from '@/api/decive'
  import { caseIndex } from '@/utils/database'
  import { exportExcel, getAllDta } from '@/utils/exprotExcel'
  import { columns } from './constants'
  const loading = ref(true)
  const appContainer = ref(null)
  //是否显示弹窗
  const dialogVisible = ref(false)
  const deviceNumber = ref('')
  const chooseValue = ref(0)
  const data = []
  const total = ref(0)
  let baseColumns = reactive(columns)
  const list = ref(data)
  //导出列表数据
  const exportExcelTable = async () => {
    dialogVisible.value = true
  }
  const sureDownload = () => {
    dialogVisible.value = false
    console.log('55', chooseValue.value == '0')
    if (chooseValue.value == '0') {
      const newArr = []
      Array.isArray(list.value) &&
        list.value.forEach((item, index) => {
          newArr.push({
            ...item,
            great: caseIndex(item.great || 'HD'),
          })
        })
      exportExcel({ column: columns, data: newArr, filename: '设备列表', autoWidth: 100, format: 'xlsx' })
    } else {
      exportAllData()
    }
  }
  const exportAllData = async () => {
    try {
      const allData = await getAllDta(getDeviceList, { deviceNumber: deviceNumber.value })
      var newArr = []
      Array.isArray(allData) &&
        allData.forEach((item, index) => {
          newArr.push({
            ...item,
            great: caseIndex(item.great || 'HD'),
          })
        })
      exportExcel({ column: columns, data: newArr, filename: '设备列表', autoWidth: 100, format: 'xlsx' })
    } catch (error) {
      console.error('Error fetching data:', error)
    }
  }
  // 获取列表信息
  const getTableList = (data) => {
    deviceNumber.value = data?.deviceId
    getDeviceList({ ...data, deviceNumber: data?.deviceId }).then((res) => {
      list.value = res.records
      total.value = res.total
    })
  }
  const reset = () => {
    loading.value = true
    setTimeout(() => {
      loading.value = false
    }, 500)
  }

  const onSubmit = (val) => {
    const data = JSON.parse(JSON.stringify(val))
    getTableList(data)
    loading.value = true
    setTimeout(() => {
      loading.value = false
    }, 500)
  }

  onMounted(() => {
    for (let item of baseColumns) {
      if (item.search) {
        item.value = ''
      }
    }
    console.log(baseColumns)
    nextTick(() => {
      getTableList({ pageSize: 20, pageNum: 1 })
    })
    setTimeout(() => {
      loading.value = false
    }, 500)
  })
</script>

<style scoped>
  .edit-input {
    padding-right: 100px;
  }
  .app-container {
    flex: 1;
    display: flex;
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
  }
  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
  }
</style>
